<template>
  <div class="navbar">
    <div class="container flex items-center h-[60px]">
      <!-- logo    -->
      <n-button class="!text-xl !font-bold" text>帝莎编程</n-button>

      <!-- 导航区域 -->
      <ui-menu>
        <ui-menu-item
          v-for="(item, index) in menus"
          :key="index"
          :active="isMenuItemActive(item)"
          @click="handleOpen(item.path)"
        >
          {{ item.name }}
        </ui-menu-item>
      </ui-menu>

      <!-- 搜索 -->
      <n-button quaternary class="ml-auto mr-3" @click="handleSearchBar">
        <template #icon>
          <n-icon :component="Search" />
        </template>
      </n-button>

      <!-- 跳转事件 -->
      <NuxtLink v-if="!user" to="/login">
        <n-button secondary strong>登录</n-button>
      </NuxtLink>

      <!-- 下拉框 -->
      <n-dropdown v-else trigger="hover" :options="userOptions" @select="handleSelect">
        <n-avatar
          class="cursor-pointer"
          round
          size="small"
          :src="
            user.avatar || 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg'
          "
        />
      </n-dropdown>
    </div>
  </div>
  <div class="w-[100%] h-[80px]"></div>

  <SearchBar ref="SearchBarRef" />
</template>

<script setup>
// 引入CompositionAPI
import { ref } from "vue";

// 引入naiveui组件
import { NButton, NIcon, NAvatar, NDropdown, createDiscreteApi } from "naive-ui";

// 引入图标
import { Search } from "@vicons/ionicons5";

// 引入路由实例
const route = useRoute();

// 全局用户信息
const user = useUser();

//导航列表
const menus = [
  {
    name: "首页",
    path: "/",
  },
  {
    name: "考试",
    path: "/paper/1",
    match: [
      {
        name: "paper-page",
      },
    ],
  },
  {
    name: "拼团",
    path: "/list/group/1",
    match: [
      {
        name: "list-type-page",
        params: {
          type: "group",
        },
      },
    ],
  },
  {
    name: "秒杀",
    path: "/list/flashsale/1",
    match: [
      {
        name: "list-type-page",
        params: {
          type: "flashsale",
        },
      },
    ],
  },
  {
    name: "直播",
    path: "/list/live/1",
    match: [
      {
        name: "list-type-page",
        params: {
          type: "live",
        },
      },
    ],
  },
  {
    name: "专栏",
    path: "/list/column/1",
    match: [
      {
        name: "list-type-page",
        params: {
          type: "column",
        },
      },
    ],
  },
  {
    name: "电子书",
    path: "/list/book/1",
    match: [
      {
        name: "list-type-page",
        params: {
          type: "book",
        },
      },
    ],
  },
  {
    name: "社区",
    path: "/bbs/0/1",
    match: [
      {
        name: "bbs-id-page",
      },
    ],
  },
  {
    name: "课堂",
    path: "/list/course/1",
    match: [
      {
        name: "list-type-page",
        params: {
          type: "course",
        },
      },
    ],
  },
];

// 用户类型
const userOptions = [
  {
    label: "用户中心",
    key: "center",
  },
  {
    label: "退出",
    key: "logout",
  },
];

// 跳转事件
const handleOpen = (path) => {
  console.log(path);
  navigateTo(path);
};

// 判断选中事件
const isMenuItemActive = (item) => {
  if (item.match) {
    let i = item.match.findIndex((o) => {
      let res = true;
      if (o.params && typeof o.params === "object") {
        res =
          Object.keys(o.params).findIndex((k) => o.params[k] === route.params[k]) !== -1;
      }
      return o.name === route.name && res;
    });
    return i !== -1;
  }
  return item.path === route.path;
};

// 抽屉实例
const SearchBarRef = ref();

// 搜索事件
const handleSearchBar = () => {
  SearchBarRef.value.open();
};

// 选择事件
const handleSelect = (t) => {
  switch (t) {
    case "logout":
      const { dialog } = createDiscreteApi(["dialog"]);
      dialog.success({
        title: "关闭",
        content: "你确定？",
        positiveText: "确定",
        negativeText: "取消",
        maskClosable: false,
        onPositiveClick: async () => {
          await useLogout();
        },
      });
      break;

    case "center":
      navigateTo({
        path: "/user/history/1",
      });
      break;
  }
};
</script>

<style>
.navbar {
  @apply bg-white fixed top-0 left-0 right-0 z-9 shadow-sm;
}
</style>
